<template>
  <a-modal
    title="积分记录"
    :ok-button-props="{ style: okHidden && { display: 'none' } }"
    :width="680"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('cancel') }"
    @cancel="() => { $emit('cancel') }">
    <div class="exampledata" v-if="isLoading">
      <a-spin />
    </div>
    <div style="padding-bottom: 80px;" v-if="!isLoading && listData.length > 0">
      <div class="list" v-for="(item, index) in listData" :key="index">
        <p>{{ item.created_at | setTime }}</p>
        <div class="box">
          行为：{{ item.action_name }} 用户此行为{{ item.pay_type === 0 ? '获得' : '扣除' }}积分为：{{ item.point }}
        </div>
      </div>
      <a-pagination
        @change="changePage()"
        style="margin-top: 30px; float: right;"
        v-model="currentPage"
        :pageSize="3"
        :total="total"
        show-less-items/>
    </div>
    <div v-if="!isLoading && listData.length <= 0">
      <p style="text-align: center;">暂无积分记录</p>
    </div>
  </a-modal>
</template>

<script>
  import {
    familyPointDetail
  } from '@/api/bank'

  export default {
    props: {
      visible: {
        type: Boolean,
        required: true
      },
      loading: {
        type: Boolean,
        default: () => false
      },
      okHidden: {
        type: Boolean,
        default: () => false
      },
      model: {
        type: Object,
        default: () => null
      },
      formData: {
        type: Object,
        default: () => null
      }
    },
    data () {
      return {
        currentPage: 1,
        total: 0,
        form: this.$form.createForm(this),
        currentLength: 0,
        listData: [],
        data: {
          village_id: '',
          family_id: '',
          year: '',
          season: '',
          page: 1,
          per_page: 3
        },
        isLoading: true
      }
    },
    filters: {
      setTime (ev) {
        const date = new Date(ev)
        // 转换日期
        const y = date.getFullYear()
        let m = date.getMonth() + 1
        m = m < 10 ? ('0' + m) : m
        let d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        let h = date.getHours()
        h = h < 10 ? ('0' + h) : h
        let M = date.getMinutes()
        M = M < 10 ? ('0' + M) : M
        let s = date.getSeconds()
        s = s < 10 ? ('0' + s) : s
        return y + '-' + m + '-' + d + ' ' + h + ':' + M + ':' + s
      }
    },
    created () {},
    mounted () {
      this.getFamilyPointDetail()
    },
    methods: {
      textareaChange () {
        this.form.validateFields((errors, values) => {
          this.currentLength = values.explain.length
        })
      },
      getFamilyPointDetail () {
        // 获取明细详情
        this.data['village_id'] = this.formData['village_id']
        this.data['family_id'] = this.formData['family_id']
        this.data['year'] = this.formData['year']
        this.data['season'] = this.formData['season']
        this.isLoading = true
        familyPointDetail(this.data).then((res) => {
          this.listData = res.data
          this.total = res.total
          this.isLoading = false
        }).catch(() => {
          this.isLoading = false
        })
      },
      changePage () {
        this.data.page = this.currentPage
        this.getFamilyPointDetail()
      }
    }
  }
</script>

<style scoped>
  .list {
    margin-top: 20px;
  }

  .box {
    border: 1px solid #222;
    padding: 20px;
  }

  .exampledata {
    text-align: center;
    /* height: 480px; */
    /* background: rgba(0, 0, 0, 0.05); */
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 30px 50px;
    margin: 20px 0;
  }

  .ant-modal-body {
    height: 480px !important;
  }
</style>
